<template>
  <div class="layout">
    <el-container>
      <el-header>
        <div class="system-name">自行车租赁管理平台</div>

        <div class="user-info" v-if="userInfo.account">
          <div class="user-headImg">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </div>
          <div class="user-name">{{userInfo.account && userInfo.account}}</div>
          <div class="exit">
            <el-button size="mini" @click="exit">退出</el-button>
          </div>
        </div>
        <div class="login" v-else>
          <el-button>登录</el-button>
        </div>
      </el-header>
      <el-container>
        <!--  aside-->
        <el-aside width="210px">
          <el-row class="tac">
            <el-col>
              <el-menu
                :default-active="this.$route.path"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                @select="selectMenu"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <el-menu-item index="/admin/bikeManage">
                  <i class="el-icon-bicycle"></i>
                  <span slot="title">自行车管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/articleManage">
                  <i class="el-icon-edit"></i>
                  <span slot="title">文章管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/orderManage">
                  <i class="el-icon-s-order"></i>
                  <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/userManage">
                  <i class="el-icon-user"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/messageManage">
                  <i class="el-icon-message"></i>
                  <span slot="title">留言管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <!--                -->
        <el-main>
          <router-view />
        </el-main>
        <!--                    <el-footer>自行测租赁管理平台</el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
import config from "./../../config";

export default {
  name: "index",
  data() {
    return {};
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    this.isLogin();
  },
  methods: {
    selectMenu(index) {
      this.$router.push({
        path: index
      });
    },
    //退出
    exit() {
      config.delCache("adminUserInfo");
      this.$store.dispatch("delUserInfo");
      this.$router.replace({ path: "/adminLogin" });
    },
    //是否登录
    isLogin() {
      let adminUserInfo = JSON.parse(config.getCache("adminUserInfo"));
      // eslint-disable-next-line no-console
      console.log(adminUserInfo, "isLogin");
      if (adminUserInfo) {
        // this.$router.next()
      } else {
        this.$router.push({ path: "/adminLogin" });
      }
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.layout {
  position: fixed;
  width: 100%;
  height: 100%;
}

// 自定义
.el-container.is-vertical {
  height: 100%;
}

>>> .el-menu-item {
  font-size: 13px;
  text-align: left;
  padding-left: 40px !important;
}

.system-name {
  float: left;
}

.user-info {
  width: 180px;
  float: right;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.login {
  float: right;
}

.user-headImg {
  float: left;
}

.el-avatar--circle {
  vertical-align: middle;
}

.user-name {
  float: left;
}

.exit {
  float: left;
}

// element系统
.el-header, .el-footer {
  background-color: rgb(84, 92, 100);
  color: #fff;
  text-align: left;
  line-height: 60px;
  height: 60px;
}

.el-footer {
  background-color: #ccc;
  color: #333333;
  text-align: center;
}

.el-aside {
  background-color: rgb(84, 92, 100);
  color: #333;
  text-align: center;
}

.el-main {
  position: fixed;
  left: 210px;
  top: 60px;
  width: calc(100% - 210px);
  height: calc(100% - 60px);
  overflow: auto;
  color: #333;
}

// .el-main::-webkit-scrollbar {
//   display: none;
// }
</style>
